<template>
  <div class="header">
    <logo />
    <span v-if="detailMonth && showMonth">{{ params.monthValue }}月 | {{ buName === '全部' ? '' : buName }} {{ title }}</span>
    <span v-else>{{ buName === '全部' ? '' : buName  }}{{ title }}</span>
    <!-- 10月 | 华润集团 采购监管月报 -->
    <div class="buttonGroup">
      <!-- <a-dropdown v-if="detailMonth">
      <template #overlay>
        <a-menu>
          <a-menu-item v-for="count in 12" :key="count">{{ count }}月</a-menu-item>
        </a-menu>
      </template>
      <a-button class="button">
          月份
          <img src="../assets/icon/subtract.svg"/>
      </a-button>
      </a-dropdown> -->
      <!-- <a-button class="button" @click="toPlatform" v-if="detailMonth && buttonShow">校验平台</a-button> -->
      <!-- <a-button class="button" @click="back" v-if="backShow">返回</a-button> -->
      <a-select
          v-if="detailMonth"
          v-model:value="params.year"
          :options="yearList"
          placeholder="年份"
          class="button"
          @change="onChange('year')"
          :allowClear="false"
      >
        <template #suffixIcon> <img src="../assets/icon/subtract.svg"/></template>
      </a-select>
      <a-select v-if="detailMonth && showMonth"
        v-model:value="params.monthValue"
        :options="monthOptions"
        placeholder="月份"
        class="button"
        @change="onChange"
        :allowClear="false"
    >
      <template #suffixIcon> <img src="../assets/icon/subtract.svg"/></template>
    </a-select>
    <a-cascader v-if="buShow"
        v-model:value="params.buValue"
        :options="buOptions"
        :fieldNames="buFieldNames"
        placeholder="请选择"
        class="button"
        @change="onChange('buCode')"
        show-search
        :allowClear="false"
    >
      <template #suffixIcon> <img src="../assets/icon/subtract.svg"/></template>
    </a-cascader>
    </div>
  </div>
</template>

<script setup>
  import { ref, defineProps, toRefs, onMounted, defineEmits, computed } from 'vue'
  import logo from '@/components/icons/LogoSvg.vue'
  import { getBuList, getmonthList, getYearList } from '../api/dashboard';
  import router, { routes } from '../router';

  const props = defineProps({
    title: {
      type: String,
      default: '华润集团国资监管画像'
    },
    detailMonth: {
      type: Boolean,
      default: false,
    },
    backShow: {
      type: Boolean,
      default: true,
    },
    showMonth: {
      type: Boolean,
      default: true,
    }
  })
  const emit = defineEmits(['getData','getMonth','getBuCode','getYear']);
  const { title,detailMonth,backShow, showMonth } = toRefs(props);
  let query = router.currentRoute.value.query;
  let currentMonth = new Date().getMonth() + 1;
  const params = ref({
    monthValue: currentMonth < 9 ? '0' + currentMonth : String(currentMonth),
    buValue: [null],
    ldap: query.ldap,
    year: new Date().getFullYear(),
  })
  // const monthValue = ref();
  // const buValue = ref();
  const renderKey = ref()
  const buShow = ref(false);
  const buFieldNames = {
    label: 'buName',
    value: 'buCode',
  }
  const buOptions = ref([]);
  const buName = ref();
  const getBuListData = (buCode) => {
    let type = 2;
    const $router = router.currentRoute.value
    // 0=主页 1=采购 2=三重 3=三方 4=专家
    if($router.name === 'supervisionReport') type = 1;
    else if ($router.name === 'szyd') type = 2;
    else if ($router.name === 'index') type = 0;
    else if ($router.name === 'expert-score') type = 4;
    else if ($router.name === 'third-party-report') type = 3;
    getBuList({ ldap: query.ldap, type: type, year: params.value.year }).then(res => {
      if(res.code === 200){
        if(res.data == null){
          buShow.value = false;
        }else {
          buShow.value = true;
          buOptions.value = res.data.map(item => {
            return {
              ...item,
              disabled: !item.checked,
            }
          });
          let info = res.data.filter(item => item.checked === true);
          if (buCode === undefined) {
            params.value.buValue[0] = info?.[0]?.buCode || null;
          } else {
            let selectedBuCode = res.data.find(item => item.buCode === buCode);
            params.value.buValue[0] = selectedBuCode?.buCode ? selectedBuCode.buCode : null;
          }

          // 选择buName后再去查询月份数据
          handleBuName();
        }
        handleYear();
        // console.log(res);
      }
    })
  }
  const handleBuName = () => {
    for(let item of buOptions.value.values()){
      if(item.buCode === params.value.buValue?.[0]){
        buName.value = item.buName;
        return;
      }
    }
  }
  const monthOptions = ref([]);
  const handleMonth = () => {
    const $router = router.currentRoute.value
    if ($router.name === 'supervisionReport' || $router.name === 'szyd' || $router.name === 'third-party-report') {
      let type = 2;
      if($router.name === 'supervisionReport') type = 1;
      else if($router.name === 'szyd') type = 2;
      else type = 3;
      let info = {
        buCode: params.value.buValue?.[0] || null,
        type: type,
        year: params.value.year,
      }
      getmonthList(info).then(res => {
        if (res.code === 200) {
          monthOptions.value = res.data.map(item => {
            let label = item.month + '月'
            return {
              label,
              value: item.month,
              disabled: !item.check,
            }
          })
        }
      }).finally(() => {
        // 数据刷新
        onChange();
      })
    } else {
      onChange();
    }
  }

  const buttonShow = computed(() => {
    return router.currentRoute.value.name === 'supervisionReport'
  })

  const toPlatform = () => {
    window.location.href = import.meta.env.VITE_PLATFORM_BASE_URL
  }
  
  const onChange = (type) => {
    if (type === 'year') {
      getBuListData(params.value.buValue?.[0]);
      return;
    }
    if (type === 'buCode') {
      handleYear();
      return;
    }
    handleBuName()
    emit('getMonth',params.value.monthValue)
    emit('getYear', params.value.year)
    emit('getBuCode',params.value.buValue?.[0] || null)
    emit('getData',{
      month: params.value.monthValue,
      buCode: params.value.buValue?.[0] || null,
      year: params.value.year,
    });
  }
  const yearList = ref([]);
  const handleYear = () => {
    // 1=采集监管 2=三重一大 3=三方 4=专家评分
    let type;
    let name = router.currentRoute.value.name;
    if (name === 'supervisionReport') type = 1;
    else if (name === 'szyd') type = 2;
    else if (name === 'third-party-report') type = 3;
    else if (name === 'expert-score') type = 4;
    if (type) {
      getYearList({ buCode: params.value.buValue[0], type: type }).then(res => {
        if (res.code === 200) {
          yearList.value = res.data.map(item => {
            return {
              label: item.year + '年',
              value: item.year,
              disabled: !item.check,
            }
          }).reverse();
        } else {
          yearList.value = [];
        }
        handleMonth();
      })
    } else {
      handleMonth();
    }
  };
  onMounted(() => {
    getBuListData();
    emit('getMonth',params.value.monthValue);
  })
</script>

<style scoped lang="less">
  .header {
    width:100%;
    height:80px;
    padding: 10px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  span {
    font-family: Source Han Sans CN;
    font-weight: 900;
    font-size: 32px;
    color: #1B2A52;
    line-height: 67.5px;
    letter-spacing: 9px;
  }
  .button {
    width: 112px;
    height: 45px;
    border: 2px solid;
    border-radius: 10px;
    border-color: #fff;
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .buttonGroup {
    display: flex;
    gap: 20px;
  }
  :deep(.ant-select-selector) {
    height: 45px !important;
    border: none !important;
  }
  :deep(.ant-select-selection-item) {
    line-height: 45px !important;
  }
  :deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-btn-default:not(:disabled)) {
    border: none !important;
  }
  :deep(:where(.css-dev-only-do-not-override-3m4nqy).ant-select-single .ant-select-selector .ant-select-selection-placeholder) {
    line-height: 45px;
  }
  :deep(:where(.css-dev-only-do-not-override-3m4nqy).ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input) {
    height: 45px;
  }
  :deep(:where(.css-3m4nqy).ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input) {
    height: 45px;
  }
</style>